<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>手风琴效果</title>
		<meta charset="utf-8" />
		<title>news页面</title>
		<link rel="stylesheet" type="text/css" href="bootstrap-4.5.0/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/home.css"/>
		<link rel="stylesheet" type="text/css" href="css/about.css"/>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
		<script src="bootstrap-4.5.0/dist/js/bootstrap.bundle.js" type="text/javascript" charset="UTF-8"></script>
		<script src="bootstrap-4.5.0/dist/js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/popper.js" type="text/javascript" charset="UTF-8"></script>
		
	</head>
	<body>
		<!--头-->
		
		<div class="container d-flex flex-column flex-md-row justify-content-between">
			<!--左-->
			<ul class="list-unstyled d-flex mb-0 py-3 mx-auto mx-md-0">
				<li>
					<i class="fa fa-user mr-2"></i>
					<span class="text-secondary">login</span>
				</li>
				<li class="mx-3">
					<i class="fa fa-pencil mr-2"></i>
					<span class="text-secondary">Register</span>
				</li>
				<li >
					<i class="fa fa-cart-plus mr-2"></i>
					<span class="text-secondary">Checkout</span>
				</li>
			</ul>
			<!--右-->
			<ol class="list-unstyled d-flex mb-0 py-3 mx-auto mx-md-0">
				<li class="mx-3">
					<i class="fa fa-heart mr-2"></i>
					<span class="text-secondary">Wishlist</span>
				</li>
				<li>
					<i class="fa fa-angle-down mr-2"></i>
					<span class="text-secondary">USD</span>
				</li>
			</ol>
		</div>
		<!--搜索框-->
		<div class="container-fluid " style="background-image: url(img/header_bg.jpg);">
			<div class="row py-5 d-flex ">
				<div class="col-md-6 col-12 text-center">
				<img src="img/logo.png" />
				</div>
				<div class="col-md-6 col-12 text-center">
				<div class="btn-group">
					<input type="text " placeholder="Search..." class="border-0" />
					<button class="btn fa fa-search  btn-outline-danger banner" style="background-color: #fc5a6d;"></button>
				</div>
				</div>
			</div>
		</div>

		
		<!--导航栏-->
		<div class="navbar navbar-expand-md  p-0 " style="background-color: #fc5a6d;">
	<button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#menu">
			   <i class="fa fa-bars "style="color: white;"></i>
	</button>
	<div class="collapse navbar-collapse justify-content-center" id="menu">
		<ul class="navbar-nav text-capitalize">
			<li class="nav-item ">
				<a href="home.html" class="nav-link">home</a>
			</li>
			<li class="nav-item">
				<a href="about.html" class="nav-link default">about</a>
			</li>
			<li class="nav-item">
				<a href="services.html" class="nav-link">services</a>
			</li>
			<li class="nav-item">
				<a href="gallery.html" class="nav-link">gallery</a>
			</li>
			<li class="nav-item">
				<a href="blog.html" class="nav-link">blog</a>
			</li>
			<li class="nav-item">
				<a href="shop.html" class="nav-link">shop</a>
			</li>
			<li class="nav-item">
				<a href="contact.html" class="nav-link">contact</a>
			</li>
		</ul>
	</div>
</div>

		
			
				<!--about-->
				
				<div class="container-fluid p-0">
					<div class="bg-light">
					<h1 class="text-center pt-5 abc"><b>About</b></h1>
					<p class="text-center p2 pt-4"style="color:#fc5a6d">
						————————————
					</p>
					<p class="text-center p2"style="color:#fc5a6d">
						————————
					</p>
					<p class="text-center  py-3 pb-5 "><span class='abc'>Home</span> 
					<span class='heise'>/About</span></p>
				</div>
				</div>
		
		
		
		<!--welcome to my hand-->
		<div class="container mx-auto">
	<div class="row  d-flex p-5">
		<div class="col-xl-6 mt-5 col-md-6 big">
			 <a href=""> <img src="img/about.jpg" width="100%" /></a>
		</div>
		<div class="col-xl-6  col-md-6 mt-5">
			<h4 class="text-capitalize font-weight-bold mt-2 ml-5 text-danger">
				welcome 
				<span style="color: black;">To Hand Made</span>
			</h4>
			<h6 class="ml-5 mb-2  ">
				It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover
			</h6>
			<h6 class="ml-5 mt-3">
				Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
			</h6>
			<a href="#" class="btn  text-white ml-5 pink"  width:"150px;" ">
				READ MORE
			</a>
		</div>
	</div>
</div>
		
	
		
		<!--雪人-->
		<div class="container-fluid">
			
			<div class="row justify-content-center"style="background-image: url(img/choose_bg.jpg);height: 650px;">
				<div class="col-lg-4"></div>
				<div class="col-lg-5">
			<div id="example">
				<h1 class="pt-5"><span class="text-danger ">Why</span> choose us</h1>
				<!--1-->
				<div class="card" >
					<div class="card-header ">
						<button class="btn btn-link w-100 text-left pink" data-toggle='collapse' data-target='#menu1' >Respecting Your Time<span class="out"></span></button>
					</div>
					<div class="card-body collapse show" id="menu1" data-parent='#example'>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
					</div>
				</div>
				<!--2-->
				<div class="card">
					<div class="card-header">
						<button class="btn btn-link w-100 text-left pink" data-toggle='collapse' data-target='#menu2'>Latest In Technology<span class="add"></span></button>
					</div>
					<div class="card-body collapse " id="menu2" data-parent='#example'>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
					</div>
				</div>
				<!--3-->
				<div class="card">
					<div class="card-header">
						<button class="btn btn-link w-100 text-left pink" data-toggle='collapse' data-target='#menu3'>Professional Staff<span class="add"></span></button>
					</div>
					<div class="card-body collapse " id="menu3" data-parent='#example'>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
					</div>
				</div>
				<!--4-->
				<div class="card">
					<div class="card-header">
						<button class="btn btn-link w-100 text-left pink" data-toggle='collapse' data-target='#menu4'>Free Home Dilevery<span class="add"></span></button>
					</div>
					<div class="card-body collapse " id="menu4" data-parent='#example'>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
					</div>
				</div>
				<!--5-->
				<div class="card">
					<div class="card-header">
						<button class="btn btn-link w-100 text-left pink" data-toggle='collapse' data-target='#menu5'>High Quality<span class="add"></span></button>
					</div>
					<div class="card-body collapse " id="menu5" data-parent='#example'>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
					</div>
				</div>
			</div>
			</div>
			</div>
		</div>
		
	


		<!--our happy customers-->
		
		
			<div class="container-fluid our p-0" background-repeat:no-repeat; ">
			<div style="background-color: rgba(0,0,0,0.8);padding: 0px; margin: 0px; ">
			<div class="container">
				<h3 class=" py-5" style="text-align: center;color: white; "><span style="color:#fc5a6d ">Our </span>Happy Customers</h3>
				<div class="row">
					<div class="col-lg-4 col-md-12 px-3 text-center ">
						<img src="img/customer1.png"/>
						<h4 style="color: #fc5a6d;">Hilpton Broad</h4>
						<p style="color: white;">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of cla ssical Latin literature from 45 BC, making it over 2000 years old.</p>
					</div>
					<div class="col-lg-4 col-md-12 px-3 text-center ">
						<img src="img/customer2.png"/>
						<h4 style="color: #fc5a6d;">Stive Philips</h4>
						<p style="color: white;">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of cla ssical Latin literature from 45 BC, making it over 2000 years old.</p>
					</div>
					<div class="col-lg-4 col-md-12 px-3 text-center">
						<img src="img/customer2.png"/>
						<h4 style="color: #fc5a6d;">Stive Philips</h4>
						<p style="color: white;">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of cla ssical Latin literature from 45 BC, making it over 2000 years old.</p>
					</div>
				</div>
			</div>
			</div>
		</div>
	</div>
		
		<!--Our Clients-->
		
		<div class="pink">
				<h2 class="text-white text-center py-3 " >Our Cliebts</h2>
				<div class="container">
					<div class="row pb-5">
						<div class="col-sm-12 text-center px-4">
							<img src="img/partner1.png" class="px-4 d-none d-xl-inline-block " />
						
							<img src="img/partner2.png" class="px-4 d-none  d-xl-inline-block" />
						
							<img src="img/partner3.png" class="px-4" />
						
							<img src="img/partner4.png" class="px-4 d-none  d-xl-inline-block" />
						
							<img src="img/partner5.png" class="px-4 d-none  d-xl-inline-block" />
						</div>
					</div>
				</div>
			</div>
		
		
		
		
	<!--底  黑色部分-->
		<div class="container-fluid  py-3 " style="background-color: #000000;">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 col-md-6 col-lg-4">
				<div class="item">
					<img src="img/logo.png" class="mt-4" />
					<p class="text-white mt-1">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>

				</div>
			</div>
			<div class="col-lg-2 col-md-3 col-sm-3">
				<div class="item">
					<div class="footer-title text- py-3 font-weight-bold" style="font-size: 30px;color: #fc5a6d;">Help</div>
					<div class="row">
						<div class="col-md-3">
							<ul class="list">
								<li>
									<a href="#" class="text-white">Find&nbsp;Your&nbsp;Beer</a>
								</li>
								<li>
									<a href="#" class="text-white">Customer&nbsp;Service</a>
								</li>
								<li>
									<a href="#" class="text-white">Contact</a>
								</li>
								<li>
									<a href="#" class="text-white">Recent&nbsp;Orders</a>
								</li>
							</ul>
						</div>

					</div>
				</div>
			</div>
			<div class="col-lg-2 col-md-3 col-sm-3">
				<div class="item">
					<div class="footer-title text- py-3 font-weight-bold" style="font-size: 30px;color: #fc5a6d;">Link</div>
					<div class="row">
						<div class="col-md-3">
							<ul class="list">
								<li>
									<a href="#" class="text-white">Home</a>
								</li>
								<li>
									<a href="#" class="text-white">Shop</a>
								</li>
								<li>
									<a href="#" class="text-white">404 Page</a>
								</li>
								<li>
									<a href="#" class="text-white">Login</a>
								</li>
							</ul>
						</div>

					</div>
				</div>
			</div>
			<div class="col-sm-6 col-md-6 col-lg-4">
				<div class="footer-item">
					<div class="footer-title  py-3 font-weight-bold" style="font-size: 30px; color: #fc5a6d;">
						Our Information
					</div>
					<span class="fa fa-map-marker  mr-2 mt-2" style="float: left;color: #fc5a6d;"></span>
					<p class="text-white">787 Lakeview St. Marion, NC 28752 </p>
					<span class="fa fa-phone  mr-2 mt-2" style="float: left;color: #fc5a6d;"></span>
					<p class="text-white">+1800123654789 <br />&nbsp;&nbsp;&nbsp;&nbsp; +1800123456788 </p>
					<span class="fa fa-envelope  mr-2 mt-2" style="float: left;color: #fc5a6d;"></span>
					<p class="text-white">Support@Handmade.Net </p>
				</div>
			</div>
		</div>
	</div>

</div>
		
		
		<!--最后一行-->
		<div class="container-fluid text-center">
	<div class="row" style="background-color: #fc5a6d;">
		<div class="mx-auto col-lg-6">
			<p class="mt-3  text-white">Copyrights © 2018 All Rights
				<a href="#" class="text-muted">Reserved</a> by Himanshusofttech</p>
		</div>
		<div class="mt-3  col-lg-6 mx-auto justify-content-md-center">
			<i class="fa fa-facebook  px-1 bai"></i>
			<i class="fa fa-twitter  px-1 bai"></i>
			<i class="fa fa-google-plus  px-1 bai"></i>
			<i class="fa fa-linkedin  px-1 bai"></i>
			<i class="fa fa-pinterest-p  px-1 bai"></i>
		</div>
	</div>
</div>
	</body>
	
	

	</script>
</html>
